﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .flot-chart {
            display: block;
            height: 200px;
        }

        .flot-chart-content {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>测试图表</h5>
                        <div class="ibox-tools">
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-line-chart-moving" style="width:1000px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top:50px">
            <input type="button" value="测试摄像头" id="viewCamera" style="width:100px;height:50px" />
            <input type="button" value="关闭窗体" id="closeForm" style="width:100px;height:50px" />
            <input type="button" value="关闭窗体" class="example1" style="width:100px;height:50px" />
        </div>
    </div>
    <script src="../static/jquery.min.js"></script>
    <script src="../static/html2canvas.js"></script>
    <script src="../static/jquery.flot.js"></script>
    <script type="text/javascript">

        var tFlag = true;
        function setFlagTrue() {
            tFlag = true
        }
        $(function () {
            alert(new Date().getTime());
            $("#viewCamera").click(function () {
                tFlag = false;
                sys.showCamera()
            })
            $("#closeForm").click(function () {
                sys.closeForm()
            })
            var container = $("#flot-line-chart-moving");
            var maximum = container.outerWidth() / 5 || 300;
            var data = [];

            function getRandomData() {

                while (data.length < maximum) {
                    data.push(-1);
                }
                var res = [];
                for (var i = 0; i < data.length; ++i) {
                    res.push([i, data[i]])
                }

                return res;
            }
            getRandomData();
            function getRandomData1() {

                data = data.slice(1);

                data.push(5);


                var res = [];
                for (var i = 0; i < data.length; ++i) {
                    res.push([i, data[i]])
                }

                return res;
            }

            series = [{
                data: getRandomData1(),
                //lines: {
                //    fill: true
                //}
            }];

            var plot = $.plot(container, series, {
                grid: {
                    color: "#999999",
                    tickColor: "#D4D4D4",
                    borderWidth: 0,
                    minBorderMargin: 20,
                    labelMargin: 10,
                    backgroundColor: {
                        colors: ["#ffffff", "#ffffff"]
                    },
                    margin: {
                        top: 8,
                        bottom: 20,
                        left: 20
                    },
                    markings: function (axes) {
                        var markings = [];
                        var xaxis = axes.xaxis;
                        for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 2) {
                            markings.push({
                                xaxis: {
                                    from: x,
                                    to: x + xaxis.tickSize
                                },
                                color: "#fff"
                            });
                        }
                        return markings;
                    }
                },
                colors: ["#1ab394"],
                xaxis: {
                    tickFormatter: function () {
                        return "";
                    }
                },
                yaxis: {
                    min: 0,
                    max: 110
                },
                legend: {
                    show: true
                }
            });

            setInterval(function updateRandom() {
                series[0].data = getRandomData1();
                if (tFlag) {
                    plot.setData(series);
                    plot.draw();
                }

            }, 1000);

            $(document).ready(function () {
                $(".example1").on("click", function (event) {
                    event.preventDefault();
                    html2canvas(document.getElementById("flot-line-chart-moving"), {
                        allowTaint: true,
                        taintTest: false,
                        onrendered: function (canvas) {
                            canvas.id = "mycanvas";

                            //生成base64图片数据
                            var dataUrl = canvas.toDataURL();
                            var newImg = document.createElement("img");
                            newImg.src = dataUrl;
                            document.body.appendChild(newImg);
                        }
                    });
                });

            });


        });
    </script>
</body>
</html>
